<template>
	<view>
		<view class="y-wrap" :style="'--bottom-height:' + bottomHeight">
			<scroll-view style="padding-top: 120rpx;" class="y-wrap_message_content" scroll-y
				:scroll-into-view="scrollToId" :refresher-enabled="useRefresh" :refresher-threshold="100"
				:refresher-triggered="triggered" scroll-with-animation refresher-default-style="white"
				refresher-background="#F2F2F2" @refresherrefresh="onRefresh" @refresherrestore="onReset"
				@tap="closeFooter">
				<view style="height: 50rpx;"></view>
				<view v-for="(item, index) in list" :key="index"
					:class="['y-wrap_message_content_box', { 'y-wrap_message_content_my' : item.name == name}]">
					<view style="text-align: center; padding: 10rpx 0 20rpx;">
						{{item.timeLabel}}
					</view>
					<view>
						<u-image width="100rpx" height="100rpx" :src="item.avatar || errorIcon" @click="tapAvator(item)"
							radius="10rpx" bgColor="#FFFFFF"></u-image>
						<view
							:class="['y-wrap_message_content_box_msg', { 'y-wrap_message_content_box_my' : item.name == name}]">
							<view
								:class="['y-wrap_message_content_box_msg__name', { 'y-wrap_message_content_box_msg__me' : item.name == name }]">
								<text>{{ item[defaultOptions['name']] }}</text>
							</view>
							<view class="flex flex-direction justify-center"
								:class="['y-wrap_message_content_box_msg__val', { 'y-wrap_message_content_box_msg__my' :  item.name == name}]">
								<view class="fefs" v-if="item.type== 4"
									:style="{background:( item.name == name?'#60FF00':'#FFFFFF')}">{{ item.message}}
								</view>
								<!-- 报价单消息 -->
								<view class="quotation flex flex-direction justify-center" v-if="item.type==1"
									@tap="budget(item.quotationId)">
									<view class="flex justify-between quotation-view">
										<view style="color: #1E1E1E;">预算单</view>
										<view style="color: #492D22;">点击查看</view>
									</view>
								</view>
								<!-- 邀请安装消息 -->
								<view v-if="item.type==5">
									<view class="quotation flex flex-direction justify-center align-center"
										@tap="budgetInvitation(item)" style="background: #492D22;"
										v-if=" item.name == name">
										<view
											style="color: #FFFFFF;text-align: center;font-size: 24rpx;padding-top:15rpx;">
											您邀请对方完成订单的安装师傅</view>
										<view class="flex justify-center  quotation-view"
											style="background:#FFFFFF;color: #492D22;">
											点击查看订单
										</view>
									</view>
									<view v-if="item.name != name"
										class="quotation flex flex-direction justify-center align-center"
										@tap="budgetInvitation(item)">
										<view
											style="color: #FFFFFF;text-align: center;font-size: 24rpx;padding-top:15rpx;color: #333333;font-weight:600;">
											对方邀请您成为订单的安装师傅</view>
										<view class="flex justify-center  quotation-view" style="color: #492D22;">
											点击查看邀请详情
										</view>
									</view>
								</view>

								<!-- 音频消息右 -->
								<view v-if="item.type ==3 &&  item.name == name" class="bubble voice flex align-center"
									style="background-color: #096;padding:10rpx ;border-radius: 10rpx;"
									@tap="playVoice(item)">
									<view class="length" style="color: #FFFFFF;">{{item.audioTime}}</view>
									<view class="icon  my-voice  " style="color: #ffffff;"></view>
								</view>
								<!-- 音频消息左 -->
								<view v-if="item.type ==3 &&  item.name != name"
									class="  bubble voice flex align-center"
									style="background-color: #096;padding:10rpx ;border-radius: 10rpx;"
									@tap="playVoice(item)">
									<view class="icon  other-voice" style="color: #ffffff;"></view>
									<view class="length" style="color: #FFFFFF;">{{item.audioTime}}</view>
								</view>
								<!-- 图片消息 -->
								<image v-if="item.type==2" @tap="lookImg(item.fileUrl, index)" :src="item.fileUrl"
									style="width:250rpx;height:250rpx;" mode="aspectFit"></image>
							</view>
						</view>
						<!-- <view class="y_message_content_box_read">
						{{item[defaultOptions['read']]?'已读':'未读'}}
					</view> -->
					</view>
				</view>
				<view style="height: 50rpx;" :id="'msg'+list.length"></view>
			</scroll-view>
			<view class="y-wrap_footer" v-if="sendds">
				<view class="y-wrap_footer_show_box" id="show_box">
					<!-- @click="textShowFlag = false" -->
					<u-icon custom-style="padding: 0 10rpx" :size="iconSize" name="mic" v-if="textShowFlag"
						@tap="yuerer()"></u-icon>
					<!-- <u-icon custom-style="padding: 0 10rpx" :size="iconSize" name="mic" v-else @click="showText">
					</u-icon> -->
					<view class="y-wrap_footer_show_box__ipt">
						<!-- <input v-if="textShowFlag" v-model="sendVal" :focus="focus" @blur="blur"></input> -->
						<u-input v-if="recording==false" v-model="sendVal" :focus="focus" @blur="blur"></u-input>
						<!-- <u-button v-else @touchstart="startAudio" @touchend="endAudio">按住说话</u-button> -->
						<button style="font-size: 32rpx; overflow: inherit;" @touchstart="startAudio"
							@touchmove="voiceIng" @touchend="voiceEnd" v-if="recording==true">按住说话</button>
					</view>
					<view>
						<!-- <u-icon custom-style="padding: 0 10rpx" :size="iconSize" name="star"></u-icon> -->
						<!-- #ifndef MP-WEIXIN -->
						<u-icon customStyle="padding: 0 10rpx;" :size="iconSize" name="plus" @click="showHideBox"
							:class="!sendVal ? 'width_to_mini' : 'fade_show'" v-if="!sendVal"></u-icon>
						<button style="width:116rpx; padding: 0; text-align: center; margin-left: 10rpx;" type="primary"
							size="mini" :class="sendVal ? 'width_to_large' : 'fade_show'" @touchend.prevent="send(4)"
							ref="send" v-else>发送</button>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<u-transition :show="!sendVal">
							<u-icon customStyle="padding: 0 10rpx;" :size="iconSize" name="plus" @click="showHideBox"
								v-if="!sendVal"></u-icon>
						</u-transition>
						<u-transition :show="sendVal">
							<button style="width:116rpx; 60rpx; padding: 0; text-align: center; margin-left: 10rpx;"
								type="primary" size="mini" v-if="sendVal" @touchend.prevent="send(4)"></button>
						</u-transition>
						<!-- #endif -->
					</view>
				</view>
				<view class="y-wrap_footer_hide_box" id="hide_box">
					<view class="y-wrap_footer_hide_box_item" v-for="(item, index) in defaultSheetType" :key="index"
						@click="moreFun(item,index)" v-if="chatType==3?index<3:index<2">
						<view class="y-wrap_footer_hide_box_item__btn">
							<u-image v-if="item.img" :src="item.img" width="70rpx" height="70rpx" mode="aspectFill" />
							<u-icon v-else :size="iconSize" :name="item.icon"></u-icon>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="audioFlag"
				:style="'position: fixed; bottom: 200rpx; left: 50%; transform: translateX(-50%); z-index: 10080; color: #fff;'">
				上划取消发送
			</view>
		</view>
		<u-popup :show="show1" mode="bottom" @close="close">
			<view v-if="tesd== '发送报价'">
				<l-file ref="lFile" :logo="logo" @up-success="onSuccess"></l-file>
				<view class="" style="text-align: center;">
					<!-- <button @tap="onUpload">上传</button> -->
					<view v-if="quotation==false" class="upload" @tap="onUpload(1)">添加报价表</view>
					<view v-if="quotation==true" class="upload" @tap="onUpload(1)">报价表已添加(重新选择)</view>
					<view style="text-align: left;padding: 30rpx;">
						<view>项目名称</view>
						<u--input placeholder="请填写项目名称" border="surround" v-model="quotedPrice.projectName"
							style="border-radius: 20rpx;width: 324rpx;height: 112rpx;"></u--input>
					</view>
					<view class="flex justify-between"
						style="padding:10rpx 0 30rpx 0;margin-top:30rpx;justify-content: center;text-align: left;">
						<view style="margin-right:40rpx ;">
							<view>面积</view>
							<u-input placeholder="请输入内容" border="surround" v-model="quotedPrice.area"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;" type="number">
								<template slot="suffix">
									<u--text text="m²" slot="prefix" type="text"></u--text>
								</template>
							</u-input>
						</view>
						<view>
							<view>风格</view>
							<u--input placeholder="请填写设计风格" border="surround" v-model="quotedPrice.styles"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;"></u--input>
						</view>
					</view>
					<view class="flex justify-between" style="padding:30rpx 30rpx ;text-align: left;">
						<view>
							<view>设计服务费</view>
							<u-input type="number" placeholder="请输入设计服务费" border="surround"
								v-model="quotedPrice.service"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;">
								<template slot="suffix">
									<u--text text="%" slot="prefix" type="text"></u--text>
								</template>
							</u-input>
						</view>
						<view>
							<view>产品清单</view>
							<u--input placeholder="请输入产品清单" border="surround" v-model="quotedPrice.prodocp"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;"></u--input>
						</view>
					</view>
					<view style="margin-left: 22rpx;display: flex;align-items: center;margin-bottom: 10rpx;">
						<u-switch v-model="quotedPrice.checked" @change="change" active-color="#492D22" active-value="1"
							inactive-value="0"></u-switch><text style="margin-left: 5rpx;color: darkgray;">是否支持白嫖</text>
					</view>
					<view class="flex justify-center flex-direction" style="text-align: left;padding:0 30rpx  ;">
						<view>填写报价金额</view>
						<view class="flex" :class=" selected==true ? 'selected' : 'sess' " style="">
							<input
								style="font-size:35rpx;color: #BDC4CE;height: 100%;line-height: 112rpx;margin-left: 15rpx;"
								placeholder="请填写报价金额" type="number" name="phone" @click="selected=true"
								v-model="quotedPrice.price" @blur="selected=false"></input>
						</view>
						<view style="margin:0 0 0 5rpx;color: darkgray;">请核对该金额是否与报价表内的金额一致</view>
					</view>
					<view style="padding:38rpx 0 ;margin:10rpx auto 30rpx auto ;" class="senghome" @tap="startSending">
						发送
					</view>
				</view>
			</view>
			<view v-if="tesd== '邀请安装'" class="flex justify-center flex-direction" style="padding:0 30rpx ;">
				<view style="text-align: center;font-size: 36rpx;margin-top: 30rpx;">邀请安装</view>
				<view style="margin-top:30rpx;" class="flex align-center">
					<easy-select ref="easySelect" size="medium" :value="scheme.name" :tesd='tesd' @selectOne="selectTwo"
						:options="options" style="border-radius: 20rpx;width:690rpx;height:128rpx;margin-top: 25rpx;">
					</easy-select>
					<view class="installInvitation" @tap="InstallationInvitation">发送邀请</view>
				</view>
				<view style="font-size: 36rpx;margin-top: 30rpx;">预约时间</view>
				<view class="time flex align-center justify-between" style="padding:0 60rpx ;" @tap="show=true">
					<view style="color: #1E1E1E;font-size: 40rpx;font-weight: 650;">{{dataTime}}</view>
					<view style="font-size: 32rpx;">{{pmOrdm}}</view>
					<view style="color: #1E1E1E;font-size: 40rpx;font-weight: 650;">{{time}}</view>
				</view>
				<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm='confirm'></u-datetime-picker>
			</view>
		</u-popup>
		<!-- 录音UI效果 -->
		<view class="record" :class="isVoice?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
	</view>
</template>
<script>
	import {
		disposeTime,
		repairZero,
		deepClone
	} from './common.js'
	import props from './props.js'
	import data from './data.js'
	import baseUrl from '@/common/config.js'
	export default {
		props,
		watch: {
			sheetList: {
				handler: function() {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						let showBox = query.select('#show_box')
						let hideBox = query.select('#hide_box')
						hideBox.boundingClientRect((res) => {
							this.hideBoxHeight = res.height
						}).exec()
						showBox.boundingClientRect((res) => {
							this.showBoxHeight = res.height
						}).exec()
					})
				},
				immediate: true,
				deep: true
			},
			newMessageList: {
				handler(newVal, oldVal) {
					const timeOptions = this.defaultOptions.time
					if (newVal.length > 0 && newVal.length != oldVal?.length) {
						newVal.forEach((item, index) => {
							item.showTime = index == 0 ? true : item.time - newVal[index - 1][timeOptions] >= this
								.intervalTime
							item.timeLabel = disposeTime(item.time)
						})
						this.list = newVal
						setTimeout(() => {
							this.scrollBottom()
						}, 100)
					}
				},
				deep: true
			},
			updateList: {
				handler: function(newVal, oldVal) {
					// if (newVal?.length == 0) return
					const timeOptions = this.defaultOptions.time
					const idOptions = this.defaultOptions.msgId
					if (Object.prototype.toString.call(newVal).includes('Array')) {
						//历史消息
						newVal.forEach((item, index) => {
							item.showTime = index == 0 ? true : item[timeOptions] - newVal[index - 1][
								timeOptions
							] >= this.intervalTime
							item.timeLabel = disposeTime(item[timeOptions])
						})
						this.list = newVal.concat(this.list)
						setTimeout(() => {
							this.scrollBottom()
						})
					} else {
						//发送消息
						console.log(newVal, 'newVal')
						// console.log(this.list, 'this.list[this.list.length - 1]')
						// newVal.time = newVal[timeOptions] - this.list[this.list.length - 1][timeOptions] >= this
						// 	.intervalTime
						// newVal.time = disposeTime(newVal[timeOptions])
						this.list.push(newVal)
						setTimeout(() => {
							this.scrollBottom()
						})
					}
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				...data
			}
		},
		mounted() {
			this.sheet()
			this.userID = this.$cache.get('id')
			this.name = this.$cache.get('name')
			// 播放语音
			this.list = []
			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});

			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// this.openSocket()
		},
		computed: {
			bottomHeight() {
				return this.footerFlag ? (this.hideBoxHeight + this.showBoxHeight + 'px') : this.showBoxHeight + 'px'
			},
			borderColor() {
				return this.readyCloseAudio ? '#fff' : '#000;'
			},
			//解决watch新老数据一样问题
			newMessageList() {
				return deepClone(this.messageList)
			}
		},
		methods: {
			change(status) {
				if (status == true) this.$tools.showToast('你选择了确认支持')

			},
			sheet() {
				let type = this.$cache.get('type')
				let defaultSheet = []
				if (type == 1) defaultSheet = this.defaultSheetType1
				if (type == 2) defaultSheet = this.defaultSheetType2
				if (type == 3) defaultSheet = this.defaultSheetType3
				if (type == 4) defaultSheet = this.defaultSheetType4
				this.defaultSheetType = defaultSheet
			},
			project() {
				this.$api.getProjectList().then((res) => {
					this.options = res.data.result
				})
			},
			//安装邀请
			InstallationInvitation() {
				this.scheme.time = this.value1
				if (this.chatType != 3) return this.$tools.showToast('只有对方是安装师傅才能发送安装邀请')
				if (this.scheme.inventory == '') return this.$tools.showToast('请选择你的项目')
				this.send(5, this.scheme)
			},
			budget(e) {
				console.log(e, 'uouio')
				let id;
				e == undefined ? id = this.quotationId : id = e
				this.$tools.goPageNoAuth('/clientEnd/page/chat/budgetSheet?data=' + id)
			},
			budgetInvitation(e) {
				let obj = {};
				if (this.scheme.name == '' && e != undefined) {
					obj = e.remark
				} else {
					obj = this.scheme
				}
				if (this.$cache.get('type') == 3) {
					this.$tools.goPageNoAuth('/pages/information/invitation?data=' + JSON.stringify(obj))
				} else {
					this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orderDetail?data=' + JSON.stringify(obj))
				}

			},
			playVoice(e) {
				if (e.type == 3) {
					this.yoyo = e.fileUrl
					this.playMsgid = e.audioTime;
				}
				this.AUDIO.src = this.yoyo;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			//报价
			startSending() {
				if (this.chatType != 4) return this.$tools.showToast('只有对方是业主才能发送报价')
				if (this.quotedPrice.quote == '') return this.$tools.showToast('请选择报价单')
				if (this.quotedPrice.projectName == '') return this.$tools.showToast('请输入项目名称')
				if (this.quotedPrice.service > 1 && this.quotedPrice.service < 101) {
					this.send(1, this.quotedPrice)
				} else {
					return this.$tools.showToast('设计服务费区间(2-100)');
				}

			},
			selectTwo(options) {
				this.scheme.name = options.name
				this.scheme.inventory = options.orderNum
				this.scheme.orderNum = options.orderNum
			},
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			// 下拉刷新被触发
			onRefresh() {
				const stop = () => {
					this.triggered = false
				}
				// this.freshing = true;
				this.$emit('onRefresh', stop.bind(this))
			},
			// 下拉刷新被复位
			onReset() {
				this.triggered = 'restore'; // 需要重置
				// this.$emit('onReset')
			},
			yuerer() {
				this.recording = !this.recording
			},
			tapAvator(item) {
				this.$emit('tapAvator', item)
			},
			scrollBottom1() {
				if (this.list.length == 0) return
				// let duration = 100
				//'y-chat-' + this.list[this.list.length - 2][this.defaultOptions.msgId]
				// duration = 0
			},
			scrollBottom() {
				if (this.list.length == 0) return
				let duration = 100
				//'y-chat-' + this.list[this.list.length - 2][this.defaultOptions.msgId]
				// duration = 0
				setTimeout(() => {
					this.scrollToId = 'msg' + (this.list.length)
				}, duration)
			},
			showHideBox() {
				this.footerFlag = !this.footerFlag
				if (this.footerFlag && this.useScrollBottom) {
					setTimeout(() => {
						this.scrollBottom()
					}, 500)
				}
			},
			close() {
				this.show1 = false
				this.sendds = true
				// console.log('close');
			},
			closeFooter() {
				this.footerFlag = false
			},
			lookImg(fileUrl, index) {
				const urls = this.list.map(item => item.fileUrl).filter(item => item)
				const current = urls.findIndex(item => item == fileUrl)
				uni.previewImage({
					current,
					urls,
					// #ifndef MP-WEIXIN
					indicator: 'number',
					loop: true,
					// #endif
					longPressActions: {
						itemList: ['发送给朋友', '保存图片'],
						success(res) {
							console.log(res, 'res')
							console.log(this, 'this')
						}
					}
				})
			},
			async moreFun(e, index) {
				this.show1 = true
				this.sendds = false
				this.tesd = e.name
				if (this.tesd == '邀请安装') this.project()
				if (e.name == '发送图片') {
					let file = await this.$tools.chooseImg(1, 1, 1)
					this.send(2, file[0].path)
				}
				// item.default ? this[item.default]() : this.$emit(item.funLabel, item)
			},
			send(e, a) {
				if (e == 4) {
					this.$emit('send', e, this.sendVal)
				} else {
					this.$emit('send', e, a)
				}
				this.show1 = false
				setTimeout(() => {
					this.sendds = true
				}, 100)
				this.scrollBottom()
				this.sendVal = ''
				this.focus = false
				uni.hideKeyboard()
			},
			blur() {
				this.focus = false
			},
			startAudio(e) {
				// if(!this.textShowFlag){
				// 	this.audioFlag = true
				// 	this.y = e.changedTouches[0].pageY
				// }
				console.log("开始录音")
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},

			//录音开始UI效果
			recordBegin(e) {
				this.isVoice = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.isVoice = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.isVoice) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.isVoice) {
					return;
				}
				this.isVoice = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				this.yoyo = e.tempFilePath
				if (!this.willStop) {
					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.send(3, msg)
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},

			/* 上传 */
			onUpload(e) {
				/**
				 * url：上传接口地址
				 * name：附件key,服务端根据key值获取文件流，默认file,上传文件的key
				 * header: 上传接口请求头
				 */
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: 'www.cohome.com.cn/api' + '/universal/uploadCloud',
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						'Authorization': uni.getStorageSync('token'),
						// 'uid': '27682',
						// 'client': 'app',
					},
					// 限制选择附件的大小上限，默认10M
					// maxSize: 20,

					// 若需要在body单独添加附件名或附件大小如下方式传入组件：
					// addName: 'file',
					// addSize: '后端要的附件大小字段key'

					// body参数直接写key,value,如：
					// date: '2020-1-1',
					exce: e,
					type: 1
					// key2: 'value2',
				});
			},
			onSuccess(res) {
				if (res.statusCode == 200) {
					this.quotation = true
				} else {
					this.quotation = false
				}
				this.quotedPrice.quote = res.data.result
				this.$emit('onSuccess', res)
			},
			confirm(e) {
				const date = new Date(e.value)
				const Y = date.getFullYear()
				const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
				const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				const h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				// Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
				this.dataTime = M + '-' + D
				this.time = h + ':' + m
				this.DayStr(this.time)
				this.show = false
			},
			DayStr(hour) {
				var hours = hour.substring(0, hour.indexOf(':'));
				var min = hour.substring(hour.indexOf(':'));
				let text = '';
				if (hours >= 0 && hours <= 12) {
					this.pmOrdm = '上午';
					if (hours == 12 && min > 0) {
						this.pmOrdm = '下午';
					}
				} else {
					this.pmOrdm = '下午';
				}
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: "HMfont-home";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	// import ''
	@mixin msgBox ($diretion, $position, $symbol) {
		content: '';
		display: block;
		position: absolute;
		#{$diretion}: auto;
		#{$position}: 0;
		top: 10rpx;
		width: 0;
		height: 0;
		// transform: translate(100%);
		transform: translateX(#{$symbol}90%);
		border: 15rpx solid transparent;
		border-#{$diretion}-color: #fff
	}

	@mixin audioAnimate ($color) {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 8rpx solid $color;
		border-radius: 50%;
		// border-top-color: transparent !important;
		border-left-color: transparent !important;
		border-right-color: transparent !important;
		border-bottom-color: transparent !important;
	}

	@keyframes fade_show {
		0% {
			opacity: 0;
			display: none;
		}

		10% {
			opacity: 0.1;
			display: block;
		}

		100% {
			opacity: 1;
			display: block;
		}
	}

	@keyframes width_animate_mini {
		0% {
			width: 116rpx;
		}

		50% {
			width: 98rpx;
		}

		100% {
			width: 80rpx;
		}
	}

	@keyframes width_animate_large {
		0% {
			width: 80rpx;
		}

		50% {
			width: 98rpx;
		}

		100% {
			width: 116rpx;
		}
	}

	.y-wrap {
		overflow: hidden;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0px;
		bottom: 0px;

		&_message_content {
			background-color: #f5f5f5;
			height: calc(100% - var(--bottom-height));
			transition: height 0.5s;

			&_box {
				padding: 10rpx;
				height: auto;

				&>view:last-child {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
				}

				&_msg {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					padding: 0 10rpx;

					&__name {
						// padding: 0 10px 5px;
						// padding-bottom: 10rpx;
						height: 56rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						&>text {
							// padding: 0 10px;
						}
					}

					&__me {
						flex-direction: row-reverse;
					}

					&__val {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;
						word-break: break-all;
						padding: 0 10rpx;
						border-radius: 10rpx;
						position: relative;
						// background: #FFFFFF;
						color: #000000
					}

					&__my {
						justify-content: flex-end;
						color: #000000;
						// background: #60FF00 !important;
					}
				}

				&_my {
					align-items: flex-end;
				}

				&__img {
					width: 60vw;
				}

				&__val::before {
					@include msgBox(right, left, '-')
				}

				&__my::before {
					@include msgBox(left, right, '+') // border-left-color: #3a9af6;
				}
			}

			&_my {
				&>view:last-child {
					flex-direction: row-reverse;
				}
			}
		}

		&_footer {
			width: 100%;
			background-color: #fff;
			position: relative;

			&_show_box {
				padding: 20rpx;
				box-sizing: border-box;
				height: 140rpx;
				display: flex;
				align-items: center;

				&__ipt {
					flex: 1;
				}

				.fade_show {
					animation: fade_show .3s linear;
				}

				.width_to_mini {
					animation: width_animate_mini .3s linear;
				}

				.width_to_large {
					animation: width_animate_large .3s linear;
				}

				view:last-child {
					display: flex;
				}
			}

			&_hide_box {
				width: 100%;
				height: 130rpx;
				display: flex;
				flex-wrap: wrap;

				&_item {
					width: 25%;
					display: flex;
					justify-content: center;
					padding-bottom: 20rpx;

					&__btn {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
		}

		&_audio {
			// background-color: #fff;
			position: relative;
			width: 210rpx;
			height: 210rpx;
			border-radius: 20rpx;
			padding: 0 20rpx;
			transform: translateY(25%);

			&__large {
				transition: border-color 0.6s;
				width: 200rpx;
				height: 200rpx;
				@include audioAnimate(#000);
			}

			&__small {
				transition: border-color 0.4s;
				width: 125rpx;
				height: 125rpx;
				@include audioAnimate(#000);
			}

			&__mini {
				transition: border-color 0.2s;
				width: 50rpx;
				height: 50rpx;
				@include audioAnimate(#000);
			}
		}

		// $_audio_popup {

		// }

	}

	.upload {
		width: 690rpx;
		height: 120rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 2rpx solid #492D22;
		color: #492D22;
		font-size: 32rpx;
		padding: 36rpx 0;
		margin: 30rpx auto;
	}

	.selected {
		width: 690rpx;
		height: 112rpx;
		margin: 20rpx 30rpx 30rpx 0;
		border-radius: 20rpx;
		border: 5rpx solid #492D22;
	}

	.sess {
		width: 690rpx;
		height: 112rpx;
		margin: 20rpx 30rpx 30rpx 0;
		border-radius: 20rpx;
		border: 1rpx solid #7A6A56;
	}

	.senghome {
		width: 404rpx;
		height: 124rpx;
		background: #492D22;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}

	.quotation {
		width: 400rpx;
		height: 200rpx;
		background: #FFFFFF;
	}

	.quotation-view {
		width: 350rpx;
		height: 169rpx;
		text-align: center;
		align-items: center;
		padding: 20rpx 40rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 10rpx;
		margin: 20rpx auto;
	}

	.record {
		width: 40vw;
		height: 40vw;
		position: fixed;
		top: 55%;
		left: 30%;
		background-color: rgba(0, 0, 0, .6);
		border-radius: 20upx;

		.ing {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			// 模拟录音音效动画
			@keyframes volatility {
				0% {
					background-position: 0% 130%;
				}

				20% {
					background-position: 0% 150%;
				}

				30% {
					background-position: 0% 155%;
				}

				40% {
					background-position: 0% 150%;
				}

				50% {
					background-position: 0% 145%;
				}

				70% {
					background-position: 0% 150%;
				}

				80% {
					background-position: 0% 155%;
				}

				90% {
					background-position: 0% 140%;
				}

				100% {
					background-position: 0% 135%;
				}
			}

			.icon {
				background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 150upx;
				color: #f09b37;
			}
		}

		.cancel {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				color: #fff;
				font-size: 150upx;
			}
		}

		.tis {
			width: 100%;
			height: 10vw;
			display: flex;
			justify-content: center;
			font-size: 28upx;
			color: #fff;

			&.change {
				color: #f09b37;
			}
		}
	}

	.hidden {
		display: none !important;
	}

	.icon {
		font-family: "HMfont-home" !important;
		font-size: 56upx;
		font-style: normal;
		color: #333;

		&.biaoqing:before {
			content: "\e797";
		}

		&.jianpan:before {
			content: "\e7b2";
		}

		&.yuyin:before {
			content: "\e805";
		}

		&.tupian:before {
			content: "\e639";
		}

		&.chehui:before {
			content: "\e904";
		}

		&.luyin:before {
			content: "\e905";
		}

		&.luyin2:before {
			content: "\e677";
		}

		&.other-voice:before {
			content: "\e667";
		}

		&.my-voice:before {
			content: "\e906";
		}

		&.hongbao:before {
			content: "\e626";
		}

		&.tupian2:before {
			content: "\e674";
		}

		&.paizhao:before {
			content: "\e63e";
		}

		&.add:before {
			content: "\e655";
		}

		&.close:before {
			content: "\e607";
		}

		&.to:before {
			content: "\e675";
		}
	}

	.bubble {
		color: #333;

		&.voice {
			.icon {
				color: #333;
				display: flex;
				align-items: center;
			}

			.icon:after {
				content: " ";
				width: 53upx;
				height: 53upx;
				border-radius: 100%;
				position: absolute;
				box-sizing: border-box;
			}

			.length {
				margin-left: 20upx;
			}
		}

		&.play {
			@keyframes other-play {
				0% {
					transform: translateX(-80%);
				}

				100% {
					transform: translateX(0%);
				}
			}

			.icon:after {
				border-right: solid 10upx rgba(255, 255, 255, .8);
				animation: other-play 1s linear infinite;
			}
		}
	}

	.fefs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		word-break: break-all;
		padding: 10rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.uploadScheme {
		width: 530rpx;
		height: 138rpx;
		background: rgba(30, 30, 30, 0.1);
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.senghomeScheme {
		line-height: 96rpx;
		margin: 90rpx auto 20rpx auto;
		width: 572rpx;
		height: 96rpx;
		background: #492D22;
		border-radius: 20rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.switching {
		width: 432rpx;
		height: 138rpx;
		background: rgba(30, 30, 30, 0.1);
		border-radius: 20rpx
	}

	.installInvitation {
		width: 228rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #492D22;
		color: #FFFFFF;
		text-align: center;
		margin-left: 30rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.time {
		width: 690rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		opacity: 1;
		margin: 30rpx 0;
		border: 2rpx solid #492D22;
	}
</style>
